.card-grid {
  position: relative;
  display: flex;
  box-sizing: border-box;
  flex-direction: row;
  align-items: center;
  width: 27.857rem;
  min-height: 6rem;
  border-radius: 0.571rem;
  max-width: 100%;
  overflow: hidden;
  margin: 1.143rem auto;
  padding: 0.857rem 1.286rem;
  backdrop-filter: blur(20px) saturate(180%);
  transition: background-color 0.2s ease-in-out;

  gap: 1.286rem;

  @apply cursor-pointer border font-sans no-underline;
  @apply [&_*]:!not-italic;
  @apply border border-slate-200/80 bg-gray-100/80 dark:border-neutral-700 dark:bg-zinc-800;
  @apply transition-colors duration-200;
}

.contents {
  flex: 1 1 auto;
  position: relative;
  display: block;
  min-width: 0;

  z-index: 1;
}

.title {
  line-height: 1.429rem;
  display: -webkit-box;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 1.071rem;
  font-weight: 500;
  margin-bottom: 0.143rem;
}

.desc {
  @apply truncate text-neutral-500 dark:text-neutral-400;

  display: block;
  margin-top: 0.429rem;
  min-width: 0;
  font-size: 0.9rem;
  line-height: 1.4;
}

.image {
  @apply aspect-square flex-shrink-0 bg-cover bg-center bg-no-repeat;
  @apply z-[1] bg-gray-50 dark:bg-neutral-700;

  height: 3rem;
  width: 3rem;
  margin-left: 0.1rem;
  border-radius: 0.41rem;
}

.skeleton {
  & .title,
  & .desc {
    border-radius: 7.071rem;
  }

  & .title {
    width: 3.571rem;
    height: 1.429rem;

    @apply bg-gray-200 dark:bg-neutral-700;
  }

  & .desc {
    width: 100%;
    margin-top: 0.857rem;
    height: 1rem;

    @apply bg-gray-200 dark:bg-neutral-700;
  }

  & .image {
    height: 3.571rem;
    width: 3.571rem;

    @apply bg-gray-200 dark:bg-neutral-700;
  }

  &.error {
    background-color: #e1534a20 !important;

    & .title,
    & .desc,
    & .image {
      background-color: #e1534a79;
      color: transparent;
    }

    & .image {
      background-image: none !important;
    }
  }
}
